<template>
  <el-form ref="ruleFrom" :model="ruleFrom"  label-width="100px">
    <el-page-header content="收费详情页" @back="goBack" />
    <!--数据表格-->
    <el-row>
      <el-col :span="24">
        <el-form-item>
          药品
          <el-table
              :data="tableData3.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              style="width: 100%;margin-left: -50px">
            <template  #default="scope">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                  prop="drugEntity[0].drugId"
                  label="药品编号">
              </el-table-column>
              <el-table-column
                  prop="drugEntity[0].drugName"
                  label="药品名称">
              </el-table-column>
              <el-table-column
                  prop="medicineSubtotal"
                  label="小计">
              </el-table-column>
              <el-table-column
                  prop="medicineCount"
                  label="数量">
              </el-table-column>
              <el-table-column
                  prop="prescriptionDetailsAttention"
                  label="注意事项">
              </el-table-column>
            </template>
          </el-table>
        </el-form-item>
        <el-form-item>
          手术项目
          <el-table
              :data="tableData1.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              style="width: 100%;margin-left: -50px">
            <template  #default="scope">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                  prop="project[0].projectId"
                  label="手术项目编号">
              </el-table-column>
              <el-table-column
                  prop="project[0].projectName"
                  label="药品名称">
              </el-table-column>
              <el-table-column
                  prop="prescriptionProjectSubtotal"
                  label="小计">
              </el-table-column>
              <el-table-column
                  prop="prescriptionDetailsAttention"
                  label="注意事项">
              </el-table-column>
            </template>
          </el-table>
        </el-form-item>
        <el-form-item>
          体检项目
          <el-table
              :data="tableData2.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              style="width: 100%;margin-left: -50px">
            <template  #default="scope">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column
                  prop="project[0].projectId"
                  label="手术项目编号">
              </el-table-column>
              <el-table-column
                  prop="project[0].projectName"
                  label="药品名称">
              </el-table-column>
              <el-table-column
                  prop="prescriptionProjectSubtotal"
                  label="小计">
              </el-table-column>
              <el-table-column
                  prop="prescriptionDetailsAttention"
                  label="注意事项">
              </el-table-column>
            </template>
          </el-table>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import http, {service} from "@/http/request";
import qs from "qs";
export default {
  name: "chargeDetailsManager",
  data() {
    return {
      reverse: true,
      rcId:0,
      currentPage:1, //初始页
      pagesize:10,    //    每页的数据
      dialogVisible: false,
      tableData1:[],
      tableData2:[],
      tableData3:[],
    }


  },

  methods: {
    // 跳转返回指定的页面
    goBack() {
      this.$router.push({
        path: '/chargeManager'
      })
    },
    selectChargeOperationProject(){
      service("http://localhost:8088/select_charge_operation_project",{params:{prescriptionId: this.rcId}})
          .then((v) => {
            this.tableData1 = v.data;
            console.log(v.data)
          })
    },
    selectChargeProject(){
      service("http://localhost:8088/select_charge_project",{params:{prescriptionId: this.rcId}})
          .then((v) => {
            this.tableData2 = v.data;
          })
    },
    selectChargeDrug(){
      service("http://localhost:8088/select_charge_drug",{params:{prescriptionId: this.rcId}})
          .then((v) => {
            this.tableData3 = v.data;
            console.log(v.data)
          })
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
  },

  created() {
    this.rcId=this.$route.query.id;
    console.log(this.rcId)
    this.selectChargeDrug()
    this.selectChargeOperationProject()
    this.selectChargeProject()
  }
}
</script>

<style scoped>
.whiteSelectBg .el-input.is-disabled .el-input__inner{
  background-color: white;
  color:#606266;
}
*{
  margin: 0px;
  padding: 0px;
}
.xq{
  width: 100%;

  background-color:#E9EEF3;
  padding-top:100px;
  padding-bottom: 100px;
}
.max_box{
  width:100%;
  height:500px;
  margin:auto;
  background-color: #E9EEF3;
}
.xia_box{
  width:850px;
  height:500px;
  background: white;
  margin-left: 360px;
  margin-top: 10px;
}

</style>